<template>
    <div>
        <div id="tabBox">
            <table border="1" width="75%" cellspacing='0' bordercolor="#000" >
                <tr v-for="(item,index) in tableNum" :key="index">
                    <td v-for="itm in item.cell" :key="itm.id" width="200px" height="100px" @click="clickTd"></td>
                </tr>
            </table>
             <grid-layout :layout.sync="layout"
                     :col-num="this.tableNum1.cells"
                     :row-height="100"
                     :maxRows="this.tableNum1.rows"
                     :is-draggable="draggable"
                     :is-resizable="resizable"
                     :responsive="false"
                     :vertical-compact="false"
                     :prevent-collision="true"
                     :use-css-transforms="true"
                     @layout-created="layoutCreatedEvent"
                     @layout-before-mount="layoutBeforeMountEvent"
                     @layout-mounted="layoutMountedEvent"
                     @layout-ready="layoutReadyEvent"
                     @layout-updated="layoutUpdatedEvent"
                     :margin="[3,3.5]"
                     :useStyleCursor="true"
                     :useCssTransforms="false"
        >
            <grid-item v-for="(item,index) in layout"
                       :static="item.static"
                       :x="item.x"
                       :y="item.y"
                       :w="item.w"
                       :h="item.h"
                       :i="item.i"
                       :key="index"
                       @click="clictItm"
            >
                <span class="text" :class="item.bgcolor"
                    @click="clictItm(item)"   >{{item.i}}</span>
            </grid-item>
        </grid-layout>
        </div>
    </div>
</template>

<script>
import { GridLayout, GridItem } from "vue-grid-layout"
export default {
    components: {
        GridLayout,
        GridItem
    },
    data() {
        return {
            layout: [
                {"x":0,"y":0,"w":1,"h":1,"i":"娃哈哈", static: false,bgcolor:'bgred'},
                {"x":1,"y":0,"w":1,"h":1,"i":"我是测试文字", static: false},
                {"x":2,"y":0,"w":1,"h":1,"i":"", static: false},
                {"x":3,"y":0,"w":1,"h":1,"i":"3", static: false},
                {"x":4,"y":0,"w":1,"h":1,"i":"4", static: false,bgcolor:'bgred'},
                // {"x":5,"y":0,"w":1,"h":1,"i":"5", static: false},
                {"x":0,"y":1,"w":1,"h":1,"i":"6", static: false},
                // {"x":1,"y":1,"w":1,"h":1,"i":"7", static: false},
                {"x":2,"y":1,"w":1,"h":1,"i":"8", static: false},
                {"x":3,"y":1,"w":1,"h":1,"i":"9", static: false},
                {"x":4,"y":1,"w":1,"h":1,"i":"10", static: false,bgcolor:'bgred'},
                {"x":5,"y":1,"w":1,"h":1,"i":"11", static: false},
                {"x":0,"y":2,"w":1,"h":1,"i":"12", static: false},
                {"x":1,"y":2,"w":1,"h":1,"i":"13", static: false,bgcolor:'bggreen'},
                // {"x":2,"y":2,"w":1,"h":1,"i":"14", static: false},
                {"x":3,"y":2,"w":1,"h":1,"i":"15", static: false},
                {"x":4,"y":2,"w":1,"h":1,"i":"16", static: false},
                {"x":5,"y":2,"w":1,"h":1,"i":"17", static: false} 
            ],
            draggable: true,
            resizable: false,
            eventLog:[],
            tableNum1:{
                rows:5,
                cells:6
            },
            tableNum:[
                
            ]
        }
    },
    created() {
        this.getTable()
    },
    methods: {
        getTable(){
            let cells = []
            for(let i = 0; i<this.tableNum1.cells;i++){
                cells.push({id:i})
              }
            for(let j = 0;j<this.tableNum1.rows;j++){
                this.tableNum.push({cell:cells})
            }
            console.log(this.tableNum,'表格数据');
        },
        layoutCreatedEvent: function(newLayout){
            this.eventLog.push("Created layout");
            console.log("Created layout: ", newLayout)
        },
        layoutBeforeMountEvent: function(newLayout){
            this.eventLog.push("beforeMount layout");
            console.log("beforeMount layout: ", newLayout)
        },
        layoutMountedEvent: function(newLayout){
            this.eventLog.push("Mounted layout");
            console.log("Mounted layout: ", newLayout)
        },
        layoutReadyEvent: function(newLayout){
            this.eventLog.push("Ready layout");
            console.log("Ready layout: ", newLayout)
        },
        layoutUpdatedEvent: function(newLayout){
            this.eventLog.push("Updated layout");
            console.log("Updated layout: ", newLayout)
            
        },
        clictItm(item){
            console.log(item,"事件源");
        },
        clickTd(e){
            console.log(e,"表格的e");
        }
    }
}
</script>

<style scoped>
.vue-grid-layout {
    /* background: #eee; */
    /* height: 340px !important; */
    width: 75%;
    position: absolute;
    left: 0;
    top: 0;
}
.vue-grid-item:not(.vue-grid-placeholder) {
    background: #ccc;
    /* border: 1px solid black; */
    /* width: 206px !important; */
    /* height: 100px !important; */
}
.vue-grid-item .resizing {
    opacity: 0.9;
}
.vue-grid-item .static {
    background: #cce;
}
.vue-grid-item .text {
    font-size: 24px;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    width: 100%;
}
.vue-grid-item .no-drag {
    height: 100%;
    width: 100%;
}
.vue-grid-item .minMax {
    font-size: 12px;
}
.vue-grid-item .add {
    cursor: pointer;
}
.vue-draggable-handle {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;
    background-position: bottom right;
    padding: 0 8px 8px 0;
    background-repeat: no-repeat;
    background-origin: content-box;
    box-sizing: border-box;
    cursor: pointer;
}
#tabBox{
    position: relative;
    
}
.bgred{
    background-color: red;
}
.bggreen{
    background-color: green;
}
</style>